
<template>
<div style="padding: 10px;">
        <el-form
          :model="queryParams"
          ref="queryForm"
          class="queryForm"
          :inline="true"
          v-show="showSearch" @submit.native.prevent
          
          >

        
            
        

            
             
            
                        <el-form-item label="角色"
                        desc="角色"
                         prop="name">
                                          <el-input
                                          v-model.trim="queryParams.name"
                                          placeholder="角色"
                                          clearable
                                          size="small"
                                          style="width:120px;"
                                          @keyup.enter.native="handleQuery"
                                          />
                                    </el-form-item>
    
    
    <!--
            <el-form-item label="权限逗号隔开"
                          desc="权限逗号隔开"
                          prop="permitIds">
                <el-input
                        v-model.trim="queryParams.permitIds"
                        placeholder="权限逗号隔开"
                        clearable
                        size="small"
                        style="width:120px;"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
    -->
    
    
    
    
    
    
    
            <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @submit.native.prevent
              @click="handleQuery">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置
            </el-button>
          </el-form-item>
        </el-form>




     <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" class="buttonsRow">
                            <el-button type="primary" size="small" plain  @click="()=>triggerModify()" >新增</el-button>
            </el-col>
            <right-toolbar
            @layout="(_obj)=>columnsHidden=_obj"
            :showSearch.sync="showSearch"
            @queryTable="getInfoList"
            ></right-toolbar>
      </el-row>


      <section class="tablecontainer">
    <el-table
      border
      ref="multipleTable"
      :data="dataList"
      size="mini"
      class="tabletop"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="rows=>{
         selectRows=rows
      }"
      @row-click="row=>{
          tableRowClickOnece(row,'multipleTable')
      }"
      :row-class-name="tableRowClassName"
    >

       <el-table-column
        type="selection"
        width="40"
        align="center"
        >
      </el-table-column>

       <el-table-column
            label="操作" width="55" align="center">
            <template slot-scope="scope">

                        <el-popover
                        placement="top-start"
                        title="操作"
                        width="222"
                        trigger="hover"
                        >

                    <div>
                             <el-button size="mini" type="text" icon="el-icon-edit" @click="()=>triggerModify(scope.row)">
                              修改
                              </el-button>

                              <el-button size="mini" type="text" icon="el-icon-notebook-1" @click="()=>openLog(scope.row)">变更日志
                              </el-button>

                              <el-button size="mini" type="text" icon="el-icon-delete" @click="()=>handleDelete(scope.row)">删除
                              </el-button>
                    </div>
                        <el-button slot="reference" type="text">操作</el-button>
             </el-popover>

          
            </template>
          </el-table-column>


      

      
       
          
          
      
       
          
          

          
          
      
       
     <el-table-column
                   v-if="!columnsHidden['name']"
                                          label="角色" prop="name"  min-width="120px;">
                              <template slot-scope="scope">
                              <div>
                                    {{scope.row.name}}
                              </div>
                              </template>
                              </el-table-column>
    
    
    
    
    
    
    
        <el-table-column
                v-if="!columnsHidden['permitIds']"
                label="权限逗号隔开" prop="permitIds"  min-width="120px;">
            <template slot-scope="scope">
                <div>
                   <span> {{scope.row.permitIds}}</span>
                   <el-button  type="text" @clicl="()=>triggerModify(scope.row)">查看</el-button>
                </div>
            </template>
        </el-table-column>




      
          <el-table-column
            label="添加时间/人" prop="add_time/add_user" v-if="!columnsHidden['add_time/add_user']">
            <template slot-scope="scope">
              <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="更新时间/人" prop="lastEditTime/editUser" v-if="!columnsHidden['lastEditTime/editUser']">
            <template slot-scope="scope">
              <span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
            </template>
          </el-table-column>


         



    </el-table>


      <el-pagination
          :background="true"
          style="padding: 20px;"
          :current-page.sync="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next"
          :total="total"
          @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
          @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"
        >
        </el-pagination>


       </section>
</div>


</template>

<script>
  import { formData, formMethod, PageData } from '@/utils/formcommon';
  import { getUrlParam,dateFormatYYYYMMDD } from '@/utils/index';
  import {default as FormDialog} from '@codegenarate/mydialogplus'

  import  * as  api  from '@/apis/sysRole.api.js';

      const dicInner={
            
             "___sys_role_id":"编号",
              "sys_role_id":"sys_role_id",
            
             "___sys_role_delState":"软删除",
              "sys_role_delState":"sys_role_delState",
            
             "___sys_role_permitIds":"权限逗号隔开",
              "sys_role_permitIds":"sys_role_permitIds",
            
             "___sys_role_name":"角色",
              "sys_role_name":"sys_role_name",
              
      }

  export default {
    name: 'sysRolelist',
    data() {
      return {
        api: api,
        dicInner,
        ...formData,
        queryParams: {
          name: '',
          searchKey:'',
            
            "id":'',
            
            "delState":'',
            
            "permitIds":'',
            
            "name":'',
            
          ...PageData,
        },
        lists: [],
        selectRows: [],
        classId: '',
        classIdPath: '',
        className: '',
        loading: false,
        isFold: false,
        tableRowClassName({ row, rowIndex }) {
            if (row.rowType == 'total') {
            return 'total-row';
            }
             return '';
         },
      };
    },
    components: {
      svgIcon:()=>import('@codegenarate/svg-icon'),
      dicSelect: () => import('@/components/DicSelect/index.vue'),
      dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
      RightToolbar: () => import('@/components/RightToolbar/index.vue'),
    },
    mounted() {
        if(this.$props['immediate']){
        this.getInfoList();
        }
    },
    filters: {
      dateFormatYYYYMMDD:dateFormatYYYYMMDD,
     },
    computed: {
    },
    watch:{},
    props:{
      immediate: {
            type: [Boolean],
            default() {
              return true;
            },
          },
    },
    methods: {
      ...formMethod,
       /**
     * @description:
     * @params _data.dataList
     * @return
     */
    initByDialog(_data) {
      this.dataList = _data && _data.dataList || [];
    },
      tableRowClickOnece(row, tableRef, options) {
            var table = this.$refs[tableRef];
            if (options && options.canSelect) {
                  var istrue = options.canSelect(row);
                  if (!istrue) {
                  table && table.toggleRowSelection(row,false);
                  }
            }
            table && table.clearSelection();
            table && table.toggleRowSelection(row);
    },
       async triggerModify(row) {
      var result = await FormDialog({
            width:'888px',
        closeOnClickModal: false,
        title: row&&row.id ? '编辑' : '新增',
        data() {
          return { ...row };
        },
        components: {
          modify: () => import('./SysRoleModify.vue'),
        },
      });
      if (!(result && result.success)) {
        return result;
      }
      this.getInfoList();
    },

    },
  };
</script>
